<!-- 评价提交组件 -->
<template>
  <view class="comment-content">
    <view class="comment-content-header">
      <view class="merchant-name">
        评论内容
      </view>
    </view>
    <v-textarea
      v-model="formData.content"
      placeholder="请输入评论内容最少10个文字，详细的描述有助于更好地展示评论内容"
      :custom-style="{ height: '400rpx' }"
      :maxlength="500"
    />
    <v-uploader
      v-model="formData.images"
      v-model:loading="uploading"
      :pre-list="formData.images"
      upload-url="/storefront/v1/file/upload/image"
      upload-name="file"
      :extra-data="{ type: 'ORDER_REFUND_IMAGE' }"
      :max-length="6"
    />
  </view>
</template>

<script setup lang="ts">
const uploading = ref(false);
const formData = ref({
  content: '',
  images: []
});

const getData = () => {
  return {
    content: formData.value.content,
    images: formData.value.images
  };
};

defineExpose({
  getData
});
</script>
<style lang="scss" scoped>
.comment-content {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  margin: 0 24rpx 20rpx;
  padding: 24rpx 25rpx;
  border-radius: 16rpx;
  background-color: white;
  align-items: stretch;
  gap: 12rpx;
  .comment-content-header {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 30rpx;
    line-height: 42rpx;
    color: #333333;
  }
}
</style>
<style>
.comment-textarea {
  height: 400rpx;
  margin: 16rpx 0 24rpx;
  padding: 12rpx;
  padding-bottom: 40rpx;
  background-color: #f5f6fa;
  box-sizing: border-box;
  overflow: hidden;
}
</style>
